<!-- 公共组件：进度条 -->
<template>
  <div class="progressComponents" v-if="false">
    <el-upload
      class="upload-demo"
      :show-file-list="false"
      :multiple="false"
      :before-upload="beforeUpload"
      :action="action"
      :on-progress="onProgress"
      :on-success="onSuccess"
      :on-error="onError"
      :with-credentials="true"
      :headers="headers"
    >
      <el-button size="small" type="primary">上传</el-button>
      <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
    </el-upload>
    <div class="dcimprogress" :visible.sync="isprogress">
      <el-progress
        :percentage="file.progress"
        :stroke-width="26"
        :format="format"
        :status="file.status"
      ></el-progress>
    </div>

    <!--气泡提示信息-->
    <el-dialog
      class="dcimToast"
      width="20%"
      :visible.sync="dialog.toast"
      append-to-body
    >{{dialog.text}}</el-dialog>
  </div>
</template>
<style scoped>
.progressComponent {
  position: relative;
}
.dcimToast /deep/ .el-progress {
  line-height: 3;
}
.dcimprogress {
  width: 500px;
  height: 300px;
  background: rgb(0, 0, 0, 0.3);
  margin: 0 auto;
  position: absolute;
  top: 20%;
  left: 35%;
}
.dcimprogress /deep/ .el-dialog__header {
  display: none;
}
.dcimprogress .el-dialog {
}
</style>
<script>
import axios from "axios";

export default {
  name: "progressline",
  data() {
    return {
      isprogress: true,
      //action: "",
      headers: {
        Authorization: ""
      },
      file: {
        progress: 0,
        status: "",
        text: ""
      },
      dialog: {
        add: false,
        camera: false,
        toast: false,
        text: ""
      }
      /* fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ] */
    };
  },
  props: {
    action: {
      type: String,
      default: " "
    }
    //percentage: {},
  },
  created() {
    this.headers.Authorization = this.$healps.getToken();
    console.log("123", this.headers.Authorization);
  },
  methods: {
    format(status) {
      this.$nextTick(() => {
        return status == "success" ? "上传成功" : "上传失败";
      });
    },
    // 提示
    showToast(text) {
      this.dialog.toast = true;
      this.dialog.text = text;
      setTimeout(() => {
        this.dialog.toast = false;
      }, 2000);
    },
    beforeUpload(file) {
      let fd = new FormData();
      fd.append("file", file);
      if (file.name.endsWith("xls") || file.name.endsWith("xlsx")) {
        this.isprogress = true;
      } else {
        this.showToast("只能是xls或xlsx文件");
        return false;
      }
    },
    showProgress(file, progress) {
      console.log("上传时间处理", file, progress);
      //  this.percentage = 100;
      // this.file.progress = progress;
    },
    uploadFileRequest(url, params, callback) {
      return axios({
        method: "post",
        url: url,
        data: params,
        onUploadProgress(progressEvent) {
          if (progressEvent.lengthComputable) {
            let val = (
              (progressEvent.loaded / progressEvent.total) *
              100
            ).toFixed(0);
            var progress = parseInt(val);
            //this.file.progress = parseInt(val);
            console.log("progressEvent", progressEvent);
            console.log("可能是进度条的值", progress);

            callback(progress);
          }
        }
      });
    },
    onProgress(event, file, fileList) {
      //this.file.progress = event.percent;
      console.log("this.file.progress", this.file.progress);
      console.log("file", file, file.percentage);

      console.log("event", event, event.percent);
      console.log("event", fileList);
    },
    onSuccess(response, file, fileList) {
      console.log("成功哦", response, file, fileList);
      this.file.progress = file.percentage;
      this.file.status = "success";
      // this.file.text = "上传成功";
    },
    onError(err, file, fileList) {
      console.log("失败哦", err, file, fileList);
      this.file.progress = file.percentage;
      this.file.status = "exception";
      // this.file.text = "上传失败";
    }

    /* handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    } */
  }
  /*  created() {
    this.dateValue = this.inputVal;
  } */
  /* methods: {
    change() {
      this.$emit("changeVal", this.formatDate(this.dateValue));
    },
    formatDate(dateValue) {
      var date = new Date(dateValue);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    }
  } */
};
</script>

